<template>
    <!--  匹配政策  -->
    <el-row :gutter="0">
        <el-col :span="11">
            <div class="checkbox">
                <div>
                    <el-checkbox class="bordered-checkbox" v-model="checkedFive" label="五星" size="large" />
                </div>
                <div class="bordered-checkbox-div">
                    <el-checkbox class="bordered-checkbox" v-model="checkedFour" label="四星" size="large" />
                </div>
                <div class="bordered-checkbox-div">
                    <el-checkbox class="bordered-checkbox" v-model="checkedThree" label="三星" size="large" />
                </div>
                <!-- <div class="bordered-checkbox-div">
                    <el-checkbox class="bordered-checkbox" v-model="checked4" label="规划" size="large" />
                </div> -->
                <!-- <span>预计可申报资助<span style="font-size: 32px;color: #c9161b;">{{ 1000 }}</span> 万</span> -->
            </div>
        </el-col>

        <el-col :span="13">
            <div class="checkbox">
                <div>
                    <el-input v-model="name" style="width: 240px; height: 40px;" placeholder="请输入公司名称"
                        prefix-icon="Search" />
                </div>
                <el-button style="margin-left: 10px;height: 40px;" type="primary" @click="getDetail">搜索</el-button>
                <el-button type="primary" style="height: 40px;">导出</el-button>
                <!-- <el-button type="primary" plain style="height: 40px;">回收站</el-button>
                <el-button type="danger" style="height: 40px;">删除</el-button> -->
            </div>
        </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%;margin-top: 20px">
        <el-table-column type="selection" align="center" />
        <el-table-column property="companyName" label="公司名称" align="center" />
        <!--    <el-table-column property="matched" label="匹配度" align="center"/>-->
        <el-table-column label="匹配度" align="center">
            <template #default="scope">
                <el-rate v-model="scope.row.rating" :max="5" :disabled="true" void-color="#c6c6c6"
                    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
            <template #default>
                <!-- <el-button type="danger" :icon="Delete" circle /> -->
            </template>
        </el-table-column>
    </el-table>

    <!---------------------- 分页 ---------------------->
    <!-- <div class="pagination" style="">
        <el-pagination v-model:current-page="currentPage1" :page-size="100" :size="size" :disabled="disabled"
            :background="background" layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div> -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type ComponentSize, ElTable } from 'element-plus'
import { detailMatching } from '@/api/detail'
import { Delete } from "@element-plus/icons-vue";

import {useRoute} from 'vue-router'
const route = useRoute()

const checkedFive = ref(false)
const checkedFour = ref(false)
const checkedThree = ref(false)
let name = ref('')

interface User {
    companyName: string
    rating: number
}
const tableData = ref([])

// 打印query参数
//获取匹配的公司List数据
// 计算选中的星级数组
const rating = computed(() => {
  const ratings = []
  if (checkedFive.value) ratings.push(5)
  if (checkedFour.value) ratings.push(4)
  if (checkedThree.value) ratings.push(3)
  return ratings
})
const getDetail = async () => { 
    console.log(name.value)
    const data = await detailMatching({
        id: route.query.id,
        selectedRatings: rating.value,
        companyName:name.value,
    })
    
    console.log("数据",data);

// 假设返回的数据结构如下：
  let responseData =data;
console.log("条数",responseData.length)
  // 映射返回的数据到 tableData
  if (responseData.length > 0) {
    tableData.value = responseData.map(item => ({
      companyName: item.companyName || '未命名公司',  // 处理可能为空的公司名
      rating: item.rating || 0  // 处理可能为空的评分
    }))
  }else{
      tableData.value=[];
  }
}
watch(rating, () => {
  console.log("选中的星级:", rating.value); // 打印选中的星级数组
  getDetail() // 当选中的星级变化时，调用获取数据的方法
})
getDetail()


//分页
let total = tableData.length
const currentPage1 = ref(5)

const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<style scoped>
.checkbox {
    display: flex;
    align-items: center;
}



.checkbox span {
    margin-left: 10px;
}

.bordered-checkbox {
    padding: 10px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
